<template>
	<div class="item_bg">
		 <div class="img_bg">
      <img class="" src="http://image.utea88.com/statics/pc_newHome_bg_01.png" alt="">
      <div @click="toHome()" :class="[isActive ? 'animation' : '', 'text_section']">
        <div class="big_title">茶生态赋能者</div>
        <div class="detail_bg">
          <div class="detail_text">众茶国际是茶产业生态赋能者、是茶界领先的茶产业数字化供应链平台</div>
          <div class="detail_text">坚持创新突破，沿着茶商茶企需求顺势而为，与百万家茶商茶企共享茶产业互联网、数字化带来的红利</div>
        </div>
        <div class="btn">了解更多</div>
      </div>
     </div>
	</div>
</template>

<script>

	export default {
    name: '',
    props: {
      activeIndex: {
        default: '',
        type: Number,
      },
    },
		components: {
			
		},
    watch: {
      activeIndex(newValue, oldValue) {
        if (newValue == this.index) {
          this.isActive = true
        } else {
          this.isActive = false
        }
      }
    },
		data() {
			return {
        index: 0,
        isActive: false,
			}
		},
		methods: {
			toHome() {
        this.$router.push({
          path: "/front-home",
        });
      }
  	},
    mounted(){
      this.isActive = true
    },
    created() {
      this.isActive = true
    },
	}
</script>

<style scoped lang="scss">
  .item_bg {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .img_bg {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
    }

    .text_section {
      position: absolute;
      top: 100%;
      left: calc((50% - (993px) / 2));
      width: 993px;
      height: 454px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: white;
      cursor: pointer;

      .big_title {
        margin-top: 69px;
        height: 105px;
        opacity: 1;
        /** 文本1 */
        font-size: 72px;
        font-weight: 700;
        letter-spacing: 5px;
        line-height: 105px;
        color: rgba(15, 131, 193, 1);
        text-align: center;
        vertical-align: top;
      }

      .detail_bg {
        margin-top: 25px;
        height: 96px;

        .detail_text {
          height: 48px;
          opacity: 1;
          /** 文本1 */
          font-size: 20px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 48px;
          color: rgba(0, 0, 0, 1);
          text-align: center;
          vertical-align: top;
        }
      }

      .btn {
        margin-top: 50px;
        width: 130px;
        height: 40px;
        opacity: 1;
        background: rgba(15, 131, 193, 1);
        /** 文本1 */
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 40px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        vertical-align: top;
      }
    }

    .animation {
      top: calc((50% - (454px) / 2));
      animation: move 0.5s linear;
    }
  }

  @keyframes move {
    0% {
      top: 100%;
    }

    100% {
      top: calc((50% - (454px) / 2));
    }
  }
</style>
